<template>
    <div id="box">
        <div id="search" style="padding-left: 150px">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="headerTool" style="padding-left: 150px;margin-bottom: 20px">
            <el-button type="primary" plain @click="addInfo">新增</el-button>
            <el-button type="danger" plain @click="deleteInfo">批量删除</el-button>
        </div>
        <!--   :data="tableData"    表格中需要渲染的数据
                label="日期"   表头
                width="180"   列宽
                prop="date"   当前列需要显示的数据
                @selection-change  点击复选框时间
         -->
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 80%;margin: 0 auto">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="block" style="padding-left: 150px;margin-top: 20px">
            <!--      current-page: 当前页   page-size: 每页展示的条数    total 数据总条数  page-sizes 下拉选选项 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
            </el-pagination>
        </div>

        <!--        页面弹窗
            :visible.sync    控制弹窗 显示还是隐藏    dialogFormVisible   true  显示  false  隐藏
        -->
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="form2">
                <el-form-item label="用户名" >
                    <el-input v-model="form2.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                    <el-input v-model="form2.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑" :visible.sync="editDialogFormVisible">
            <el-form :model="form3">
                <el-form-item label="用户名" >
                    <el-input v-model="form3.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                    <el-input v-model="form3.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editDialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "ScoreView",
    data() {
        return {
            editDialogFormVisible:false,
            dialogFormVisible:false,
            form3:{
                name:'',
                address:''
            },
            form2:{
                username:'',
                address:''
            },
            form:{
                username:'',
                address:''
            },
            tableData: [
                {
                    id:1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id:3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id:4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ]
        }
    },
    methods:{
        handleEdit(row){
            this.editDialogFormVisible = true
            console.log(JSON.stringify(row))
            // 将当前行数据回显在表单中
            this.form3 = row
            // 发送http请求
        },
        handleDelete(row){
            console.log(JSON.stringify(row))
            // 发送http请求
        },
        handleSelectionChange(val){
            // val 是选中行的所有数据  一般在批量删除时 只需要当前行的id即可   所以可以遍历所有选中行数据  筛选id  箭头函数
            let ids =  val.map(row=>row.id)
            console.log(JSON.stringify(ids))
        },
        //  改变每页显示数据条数时 会自动调用该函数  参数:当前页允许显示数据的条数
        handleSizeChange(limit){
            console.log("每页显示的条数是:",limit)
        },
        // 改变页码时会自动调用该函数    参数 :当前页的页码
        handleCurrentChange(currentPage){
            console.log("当前页码是:",currentPage)
        },
        onSubmit(){

        },
        addInfo(){
            // 显示弹出层
            this.dialogFormVisible = true
        },
        deleteInfo(){
            console.log("deleteInfo")
        }

    }
}
</script>

<style scoped>

</style>